<template>
  <div class="home">
    <!-- 头部开始 -->
    <div class="header">
      <!-- 标题开始 -->
      <van-nav-bar title="掌上新闻">
        <template #left>
          <van-icon name="user-o" size="18" />
        </template>
        <template #right>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>
      <!-- 标题结束 -->
      <!-- 频道开始 -->
      <van-row>
        <van-col span="21">
            <van-tabs v-model="activeName">

              <van-tab 
                :name="item.id" 
                :to="{path:'/home/newslist/'+item.id}"  
                v-for="item in getSelectedCate" 
                :title="item.cateName" 
                :key="item.id">
              </van-tab>
              
            </van-tabs>
        </van-col>
        <van-col span="3" class="add" @click="goToCateManager">+</van-col>
      </van-row>
    
      <!-- 频道结束 -->
    </div>
    <!-- 头部结束 -->

    <!-- 容器开始 -->
    <router-view></router-view>
    <!-- 容器结束 -->
  </div>
</template>

<script>

import {mapActions,mapGetters} from 'vuex'
export default {
  name: 'Home',
  data(){
    return {
      activeName:this.$route.params.id
    }
  },
  methods: {
    ...mapActions(['getData']),
    goToCateManager(){
      this.$router.push({path:'/selectcate'})
    }
  },
  computed:{
    ...mapGetters(['getSelectedCate'])
  },
  mounted() {
    this.getData()
  },
}
</script>

<style lang="scss">
.home{
  // 让新闻的头部定位不动  窗口滚动时头部也不移动
  .header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    .van-nav-bar{
      height: 40px;
      background-color: #d2691e;
      .van-nav-bar__content{
        height: 40px;
      }
      .van-icon{
        color:#fff;
      }
      .van-nav-bar__title{
        font-size: 20px;
        color: #fff;
      }
    }
    .add{
      display: flex;
      justify-content: center;
      align-items: center;
      color: #d2691e;
      border-left: 1px solid #eee;
      border-bottom: 1px solid #eee;
      height: 44px;
      background-color: #fff;
    }
  }
}
</style>